<template>
  <div style="background-color: rgb(239, 239, 244)">
    <div
      style="
        background-color: rgb(249, 249, 249);
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      "
    >
      <div style="width: 70%; display: flex">
        <div>
          <img
            src="../../assets/img/hetong.png"
            alt=""
            style="width: 40px; height: 40px; margin-top: 5px"
          />
        </div>
        <div style="font-size: 24px; margin-top: 10px; margin-left: 10px">
          销售合同
        </div>
      </div>
      <div style="width: 30%">
        <div>
          <img
            src="../../assets/img/sq.png"
            alt=""
            style="background-color: rgb(200, 200, 200); float: right"
          />
        </div>
      </div>
    </div>
    <div style="width: 100%; height: 50px; display: flex; align-items: center">
      <div style="display: flex">
        <div style="width: 120px; margin-top: 8px; margin-left: 20px">
          合同名称:
        </div>
        <el-input v-model="input1" placeholder="合同名称"></el-input>
      </div>
      <div style="display: flex; margin-left: 30px">
        <div style="width: 120px; margin-top: 8px">合同编号:</div>
        <el-input v-model="input2" placeholder="合同编号"></el-input>
      </div>
      <div style="display: flex; margin-left: 30px">
        <div style="width: 120px; margin-top: 8px">客户名称:</div>
        <el-input v-model="input3" suffix-icon="el-icon-search"></el-input>
      </div>
    </div>
    <div
      style="
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        width: 100%;
        height: 100px;
      "
    >
      <div
        style="
          width: 24%;
          height: 80px;
          background-color: #fff;
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        "
      >
        <div style="margin-top: 10px; margin-left: 10px">合同总数</div>
        <div style="font-size: 24px; margin-top: 10px; margin-left: 10px">
          91
        </div>
      </div>
      <div
        style="
          width: 24%;
          height: 80px;
          background-color: #fff;
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        "
      >
        <div style="margin-top: 10px; margin-left: 10px">合同总额</div>
        <div style="font-size: 24px; margin-top: 10px; margin-left: 10px">
          67865555.00
        </div>
      </div>
      <div
        style="
          width: 24%;
          height: 80px;
          background-color: #fff;
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        "
      >
        <div style="margin-top: 10px; margin-left: 10px">履约中合同总额</div>
        <div style="font-size: 24px; margin-top: 10px; margin-left: 10px">
          50585555.00
        </div>
      </div>
      <div
        style="
          width: 24%;
          height: 80px;
          background-color: #fff;
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        "
      >
        <div style="margin-top: 10px; margin-left: 10px">本月收款总额</div>
        <div style="font-size: 24px; margin-top: 10px; margin-left: 10px">
          5840000.00
        </div>
      </div>
    </div>
    <div>
      <el-table :data="contractData" style="width: 100%">
        <el-table-column prop="contractName" label="合同名称" width="200">
        </el-table-column>
        <el-table-column prop="contractNumber" label="合同编号" width="170">
        </el-table-column>
        <el-table-column prop="customerName" label="客户名称" width="190">
        </el-table-column>
        <el-table-column prop="personInCharge" label="客户经理" width="140">
        </el-table-column>
        <el-table-column prop="founder" label="签订日期" width="120">
        </el-table-column>
        <el-table-column prop="contractPrice" label="合同金额" width="100">
        </el-table-column>
        <el-table-column
          prop="contractStatus"
          label="合同状态"
        ></el-table-column>
        <el-table-column prop="edit_icon"
          ><el-button type="primary" icon="el-icon-edit"></el-button
        ></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { selectContractAll } from "../../api/sales";
export default {
  mounted() {
    this.selectContractAll();
  },
  data() {
    return {
      contractData: [],
    };
  },
  methods: {
    selectContractAll() {
      selectContractAll().then((res) => {
        console.log(res);
        this.contractData = res.result;
      });
    },
  },
};
</script>

<style>
</style>